import React from "react";
import { Row, Col, Table, message, Button } from 'antd';
import { connect } from 'dva';
import ElectricityDetailHeaderLeft from './components/ElectricityDetailHeaderLeft';
import ElectricityDetailHeaderRight from './components/ElectricityDetailHeaderRight';
import SearchElecticityDetailForm from './components/SearchElecticityDetailForm';
import ElectricityLineLeft from './components/ElectricityLineLeft';
import ElectricityLineRight from './components/ElectricityLineRight';
import { exportExcl } from '@/utils/xlsx';
import XLSX from "xlsx";
import { getQueryString } from '@/utils/util';

interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  deviceWisdomElectricityLog?: {
    data: Array<any>,
    dataCnt: number
  },
  query: any;
  deviceWisdomElectricityLogAll?: {
    data: Array<any>,
    dataCnt: number
  },
  loading?: boolean
}

@connect(({ analyse_device, loading, routing }) => ({
  deviceWisdomElectricityLog: analyse_device.deviceWisdomElectricityLog,
  deviceWisdomElectricityLogAll: analyse_device.deviceWisdomElectricityLogAll,
  loading: loading.effects['analyse_device/queryDeviceWisdomElectricityLog'],
  query: routing.location.query,
}))
class DeviceElectricityDetails extends React.PureComponent<IProps> {

  state = {
    current: 1,
    sortType: '',
    isChangePage: false,
    deviceId: getQueryString('id')
  };

  queryData = (params) => {
    const { dispatch } = this.props;
    params.deviceId = this.state.deviceId;
    params.sort = '-createTime';
    // dispatch({
    //   type: 'analyse_device/queryDeviceWisdomElectricityLog',
    //   payload: params,
    // });
  };

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  handleExport = e => {
    const { dispatch } = this.props;
    dispatch({ type: 'analyse_device/queryDeviceWisdomElectricityLogAll', payload: {
      pageNum: 1,
      pageSize: 1000000,
      deviceId: this.state.deviceId
    }}).then(() => {
      const { deviceWisdomElectricityLogAll = { data: [] } } = this.props;
      const { data } = deviceWisdomElectricityLogAll;

      const ans = data && Array.isArray(data) && data.map(item => {
        return {
          '电压值/V': item.valueMap.voltage,
          '电流值/A': item.valueMap.ampere,
          '剩余电流值/mA': item.valueMap.leakage,
          '温度1/°C': item.valueMap.temperature1,
          '温度2/°C': item.valueMap.temperature2,
          '温度3/°C': item.valueMap.temperature3,
          '温度4/°C': item.valueMap.temperature4,
          '接收时间': item.createTime
        }
      });

      exportExcl({
        XLSX,
        data: ans,
        name: "智慧用电详情统计",
        fileName: "智慧用电详情统计"
      })
    })
  };

  componentDidMount() {
    this.queryData({
      pageNum: 1,
      pageSize: 10
    });
  }

  render() {
    const { deviceWisdomElectricityLog = { data: [], dataCnt: 0 }, loading } = this.props;
    const { data, dataCnt } = deviceWisdomElectricityLog;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: item.id,
      receiveTime: item.createTime ? item.createTime : '/',
      voltageOne: item.valueMap ? item.valueMap.voltage1 ? item.valueMap.voltage1 : '/' : '/',
      voltageTwo: item.valueMap ? item.valueMap.voltage2 ? item.valueMap.voltage2 : '/' : '/',
      voltageThree: item.valueMap ? item.valueMap.voltage3 ? item.valueMap.voltage3 : '/' : '/',
      currentOne: item.valueMap ? item.valueMap.ampere1 ? item.valueMap.ampere1 : '/' : '/',
      currentTwo: item.valueMap ? item.valueMap.ampere2 ? item.valueMap.ampere2 : '/' : '/',
      currentThree: item.valueMap ? item.valueMap.ampere3 ? item.valueMap.ampere3 : '/' : '/',
      leakage: item.valueMap ? (Object.keys(item.valueMap).filter(item => item.indexOf('leakage') === 0).map(v => item.valueMap[v])) : '/',
      temperatureOne: item.valueMap ? item.valueMap.temperature1 ? item.valueMap.temperature1 : '/' : '/',
      temperatureTwo: item.valueMap ? item.valueMap.temperature2 ? item.valueMap.temperature2 : '/' : '/',
      temperatureThree: item.valueMap ? item.valueMap.temperature3 ? item.valueMap.temperature3 : '/' : '/',
      temperatureFour: item.valueMap ? item.valueMap.temperature4 ? item.valueMap.temperature4 : '/' : '/',
    })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: 10,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        }, () => this.queryData({
          pageNum: current,
          pageSize: 10
        }));
      },
    };

    const columns = [{
      title: '电压值1/V',
      dataIndex: 'voltageOne'
    }, {
      title: '电压值2/V',
      dataIndex: 'voltageTwo'
    }, {
      title: '电压值3/V',
      dataIndex: 'voltageThree'
    }, {
      title: '电流值1/A',
      dataIndex: 'currentOne',
    }, {
      title: '电流值2/A',
      dataIndex: 'currentTwo',
    }, {
      title: '电流值3/A',
      dataIndex: 'currentThree',
    }, {
      title: '剩余电流值/mA',
      dataIndex: 'leakage',
    }, {
      title: '温度1/°C',
      dataIndex: 'temperatureOne',
    }, {
      title: '温度2/°C',
      dataIndex: 'temperatureTwo',
    }, {
      title: '温度3/°C',
      dataIndex: 'temperatureThree',
    }, {
      title: '接收时间',
      dataIndex: 'receiveTime'
    }];

    return (
      <>
        <div style={{ 'marginBottom': '50px' }}>
          <Button type="primary" onClick={
            () => {
              window.history.back();
            }}>返回</Button>
        </div>
        <Row key='0'>
          <Col span={12}>
            <ElectricityDetailHeaderLeft />
          </Col>
          <Col span={12}>
            <ElectricityDetailHeaderRight />
          </Col>
        </Row>
        <Row key="1" style={{ 'marginBottom': '50px' }}>
          <Col span={12}>
            <div style={{ 'position': 'relative' }}>
              <ElectricityLineLeft />
            </div>
          </Col>
          <Col span={12}>
            <div style={{ 'position': 'relative' }}>
              <ElectricityLineRight />
            </div>
          </Col>
        </Row>
        <Row key="2">
          <SearchElecticityDetailForm current={this.state.current} initCurrent={this.initCurrent} handleExport={this.handleExport} />
          <Table
            columns={columns}
            pagination={pagination}
            dataSource={ans}
            bordered
            loading={loading}
          />
        </Row>
      </>
    );
  }
}

export default DeviceElectricityDetails;
